<script>
import { mapState, mapActions } from "pinia";
import { useUserStore } from "../stores/user";
import UserApi from "../api/user";

export default {
  methods: {
    ...mapActions(useUserStore, ["logoutState"]),
    async logout() {
      const api = new UserApi();
      let res = await api.logout();
      console.log(res);
      if (res.code === 200 && res.data.logoutStatus === "success") {
        // this.isLogin = false;
        this.logoutState();
        this.$router.replace("/login");
      }
    },
  },
  computed: {
    ...mapState(useUserStore, ["isLogin", "isAdmin"]),
  },
};
</script>

<template>
  <header>
    <div class="logo">
      <img alt="MyCake logo" class="logo" src="@/assets/logo.svg" />
      <h1>好运来蛋糕店</h1>
    </div>
    <div class="top-nav">
      <template v-if="isLogin">
        <span v-if="isAdmin"><router-link to="/admin">管理</router-link></span>
        <span><router-link to="/user">我的</router-link></span>
        <span><a href="javascript:void(0);" @click="logout">退出</a></span>
      </template>
      <template v-else>
        <span><router-link to="/login">登录</router-link></span>
        <span>注册</span>
      </template>
    </div>
  </header>
</template>

<style scoped>
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  height: 80px;
  flex: 0 0 80px;
}

.logo h1 {
  flex: 1 1 auto;
  margin-left: 16px;
}

.top-nav {
  margin-right: 40px;
}

.top-nav > span {
  padding: 16px;
}
</style>
